{% load static %}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>

</head>

<body>

<table class="layui-hide" id="logTable" lay-data="id:logTable" lay-filter="logTable"></table>
<!-- 数据表格开始 -->

<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm" id="allDelete" lay-event="allDelete">批量删除</button>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm " lay-event="video">录 像</a>

</script>
{% csrf_token %}
<script type="text/javascript">


    layui.use(['form', 'layer', 'table', 'laytpl', 'laydate', 'util'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laytpl = layui.laytpl,
                table = layui.table,
                laydate = layui.laydate,
                util = layui.util;

            //渲染数据表格 刚打开网页的时候 加载的
            table.render({
                elem: '#logTable'
                , url: "/selectweblog/"
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code,    //解析接口状态
                        "count": res.count,  //解析数据长度
                        "page": res.page,   //当前页
                        "limit": res.limit,  //当前页数据条数
                        "data": res.data,  //解析数据列表
                        "pages": res.pages
                    };
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                }
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , page: true
                , id: 'table'
                , defaultToolbar: ['filter']
                , title: '用户数据表'
                , height: 'full-200'
                , cols:
                    [
                        [
                            {type: 'checkbox', fixed: 'left'}
                            // id  为数据库中字段名
                            , {field: 'id', title: 'ID', width: 80, fixed: 'left', align: 'center', sort: true}
                            , {field: 'hostname', title: '主机名', width: 100, align: 'center'}
                            , {field: 'ip', title: '主机IP', width: 150, align: 'center'}
                            , {field: 'port', title: '端口', width: 70, align: 'center'}
                            , {field: 'username', title: '用户名', width: 100, align: 'center'}
                            ,
                            {
                                field: 'cmd', title: '命令', width: 200, align: 'center', templet: function (t) {
                                    return t.cmd
                                }
                            }

                            , {field: 'address', title: '登陆地IP地址', width: 150, align: 'center'}
                            , {field: 'start_time', title: '会话开始时间', width: 220, align: 'center'}
                            , {field: 'create_time', title: '日志生成时间', width: 220, align: 'center'}
                            , {
                            field: 'detail', title: '命令结果详情', width: 200, align: 'center', templet: function (tt) {
                                return tt.detail
                            }
                        }
                            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 100, align: 'center'}
                        ]
                    ]

            });


            //监听头部工具栏事件
            table.on("toolbar(logTable)", function (obj) {
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                    switch (layEvent) {
                        case 'allDelete':    // 批量删除
                            var checkStatus = table.checkStatus(obj.config.id)  // id 为表格的，项目中有一处 写的有说明
                                , data = checkStatus.data; //获取选中的数据
                            //console.log(data)
                            if (checkStatus.data.length > 0) {  //有选择的的数据行
                                var ids = [];
                                //定义一个数组，用于存储选中行的id
                                //使用for循环将选中的数据信息保存在数组中
                                for (let i = 0; i < checkStatus.data.length; i++) {
                                    ids[i] = checkStatus.data[i].id;  // 注意这里的id 字段
                                }
                                //实践证明，在这里ajax是不能向后台发送数组数据的，所以需要对数据进行转换，可以转换成字符串
                                var idsString = ids.join(",");//分隔符，用啥分割，在后台就用啥拆分。
                                //console.log(idsString)
                                //现在数组已经拿到了数据，那我下来就是看能否将数组传递给后台进行删除，删除之前进行判断确认
                                layer.confirm("确认删除这" + checkStatus.data.length + "条数据吗？", {
                                    icon: 3,
                                    title: "删除提示"
                                }, function (index) {
                                    layer.open({
                                        title: '删除信息'
                                        , type: 1
                                        , closeBtn: false
                                        , area: '300px;'
                                        , shade: 0.8
                                        , id: 'LAY_layuipro'
                                        , btn: ['保存', '取消']
                                        , content: '是否删除'
                                        , success: function (layero) {
                                            var btn = layero.find('.layui-layer-btn');
                                            var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
                                            btn.find('.layui-layer-btn0').click(function () {
                                                $.ajax({
                                                    //几个参数需要注意一下
                                                    type: "post",  //方法类型
                                                    url: "/log_delete_all/",  // 跳转的url
                                                    data: {
                                                        "ids": idsString,
                                                        'csrfmiddlewaretoken': csrf_token
                                                    },
                                                    dataType: "json",
                                                    async: false,
                                                    traditional: true,
                                                    success: function (result) {
                                                        // console.log(result.code)
                                                        if (result.code == 200) {
                                                            layer.msg("删除成功");
                                                            setTimeout(function () {
                                                                //重新加载当前页面
                                                                location.reload();
                                                            }, 1000);
                                                        } else (
                                                            layer.msg("删除失败")
                                                        )
                                                    }
                                                });
                                                //关闭弹出层页面
                                                layer.close(index);
                                            });
                                        }
                                    });
                                });
                            } else {
                                layer.msg("请选择删除的数据！");
                            }
                    }
                }
            );


            // 工具条事件  就是操作那一栏
            table.on('tool(logTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                // console.log(data)
                if (layEvent === 'video') { //编辑

                    openVideo(data, form);
                }
                ;
            });

            //打开修改页面
            // layer的弹出层打开之后，会回调一个success的方法，我们自定义这个方法，将我们要传递的数据渲染到子页面上.（实际上是在父页面上完成对子页面的数据渲染）
            function openVideo(data, form) {
                var index = layui.layer.open({
                    title: "录像",
                    type: 2,
                    content: "/lx/",    // 仅供 临时页面使用
                    area: ["10px", "10px"],
                    shade: 0.4,
                    resize: false,
                    maxmin: true,
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        if (data) {
                            //console.log(data.id)
                            var log_id = data.id

                            var lxpath_temp = ''
                            var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
                            $.ajax({
                                //几个参数需要注意一下
                                type: "post",  //方法类型
                                url: "/lxpath/",  // 跳转的url
                                data: {
                                    "logid": log_id,
                                    'csrfmiddlewaretoken': csrf_token
                                },
                                dataType: "json",
                                async: false,
                                traditional: true,
                                success: function (res) {
                                    lxpath_temp = res.lxpathtemp
                                },
                            });

                           // console.log(lxpath_temp)
                            window.location.href = "/luxiang/?path=" + lxpath_temp;

                        }
                        setTimeout(function () {
                            layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        }, 500)
                    }
                })
            }

        }
    );
</script>
</body>
</html>
 